<template>
	<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<router-link 
					:to="{
						name:'xiangqing',
						query:{
							id:m.id,
							title:m.title,
							content:m.content,
						}
					}"
				>
					{{m.title}}
				</router-link>
				<button @click="showDetailInfo(m)">查看</button>
			</li>
		</ul>
		<hr>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				messageList:[
					{id:'76ui8',title:'联通提示',content:'您当月累计使用流量超过50G，面临限速！'},
					{id:'98u9u',title:'移动提示',content:'劲爆套餐，限时折扣，快来抢！'},
					{id:'87eww',title:'电信提示',content:'还是我最好，赶快用我！'}
				]
			}
		},
		methods: {
			showDetailInfo(m){
				this.$router.replace({
					name:'xiangqing',
					query:{
						id:m.id,
						title:m.title,
						content:m.content,
					}
				})
			}
		},
		mounted() {
			console.log('Message挂载了')
		},
		destroyed(){
			console.log('Message销毁了')
		}
	}
</script>